<!-- 个人中心 -->
<template>
	<view class="container">
		<view class="top">
			<view>
				<image style="width: 750rpx;height: 375rpx;" src="https://huboshizb.bigchun.com/uploads/20220912/6ed7199c7e2c948923333c9b38f58f31.png"></image>
			</view>
			<view class="topbox">
				<view class="title">珠宝项链珠宝项链珠宝项链珠宝项链...</view>
				<view class="content">珠宝项链珠宝项链珠宝项链珠宝项链珠宝项链...</view>
				<view class="br"></view>
				<view class="jiage">
					<view class="zuo">
						<view class="money">￥100.00</view>
						<view class="moneyname">优惠价</view>
					</view>
					<view class="you">
						<view style="text-align: center;">
							<image style="width: 32rpx;height: 32rpx;" src="../../static/image/shop1.png"></image>
							<view class="fx">分享</view>
						</view>
						<view class="youitem" style="text-align: center;">
							<image style="width: 32rpx;height: 32rpx;" src="../../static/image/shop2.png"></image>
							<view class="sc">收藏</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="xia">
			<view class="xia1">
				<view class="name">优惠券</view>
				<view class="xia1-bottom">
					<view style="display: flex;flex:1">
						<view class="item1">满100减20</view>
						<view class="item2">满50减5</view>
					</view>
					<view class="more">
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/shop5.png"></image>
					</view>
				</view>
			</view>

			<view class="xia2">
				<view class="name">服务保障</view>
				<view class="xia1-bottom">
					<view style="display: flex;flex:1">
						<view class="bot">
							<image style="width: 28rpx;height: 28rpx;" src="../../static/image/shop6.png"></image>
							<view class="name2">放心购</view>
						</view>
						<view class="bot" style="margin-left: 20rpx;">
							<image style="width: 28rpx;height: 28rpx;" src="../../static/image/shop6.png"></image>
							<view class="name2">在线客服</view>
						</view>
					</view>
					<view class="more">
						<image style="width: 17rpx;height: 30rpx;" src="../../static/image/shop5.png"></image>
					</view>
				</view>
			</view>

			<view class="xia3" @click="toorder()">
				<view class="name">详情</view>
				<view class="xia-content">
					详情详情详情详情详情详情详情详情详情详情 详情详情详情详情详情详情详情详情详情详情 详情详情详情详情详情。
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {},
		onShow() {

		},
		computed: {

		},
		methods: {

			toorder() {
				uni.navigateTo({
					url:'/pages/shop/order'
				})
			}
		},
	}
</script>
<style>
	page {
		background: #F5F5F5 !important;
		height: 100%;

	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;

	}

	.top {
		// height: 615rpx;
		background: white;
	}

	.topbox {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 240rpx;
		padding: 0rpx 30rpx 30rpx 30rpx;

	}

	.jiage {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}

	.content {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.zuo {
		display: flex;
		align-items: center;
	}

	.you {
		display: flex;
		align-items: center;
	}

	.br {
		border: 1px solid #F2F2F2;
	}

	.money {
		font-size: 44rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #DE2415;
	}

	.moneyname {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-left: 16rpx;
	}

	.fx {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.sc {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;

	}

	.youitem {
		margin-left: 50rpx;
	}

	.xia {
		padding: 30rpx;
	}

	.xia1 {
		// width: 691px;
		height: 192rpx;
		background: #FFFFFF;
		border-radius: 28px;
		padding: 30rpx;
	}

	.xia1-bottom {
		display: flex;
		margin-top: 38rpx;
		// justify-content: space-between;
		align-items: center;
	}

	.item1 {
		background-size: 100% 100%;
		width: 216rpx;
		height: 61rpx;
		background-image: url('/static/image/shop3.png');
		font-size: 28rpx;
		color: #DE2415;
		// align-items: center;
		// display: flex;
		// justify-content: center;
		text-align: center;
		line-height: 61rpx;
	}

	.item2 {
		background-size: 100% 100%;
		width: 181rpx;
		height: 61rpx;
		background-image: url('/static/image/shop4.png');
		font-size: 28rpx;
		color: #DE2415;
		text-align: center;
		line-height: 61rpx;
		// align-items: center;
		// display: flex;
		// justify-content: center;
		margin-left: 30rpx;
	}

	.xia2 {
		margin-top: 28rpx;
		padding: 30rpx;
		height: 158rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
	}

	.name {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}

	.name2 {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-left: 13rpx;
	}

	.bot {
		display: flex;
		align-items: center;
	}

	.xia3 {
		margin-top: 28rpx;
		padding: 30rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
	}

	.xia-content {
		height: 170rpx;
		background: #FFF7ED;
		border-radius: 28px;
		padding: 30rpx;
		color: #C87D11;
		margin-top: 35rpx;
	}
</style>
